<template>
	<!-- 固井质量 -->
	<div style="width: 100%">
		<el-row :gutter="20">
			<!-- <el-col :sm="8" :md="6" :lg="lgdata" :xl="3" :style="{ height: cardHeight }">
				<el-card style="height: 100%" class="card">
					<div slot="header">
						<span>固井质量</span>
						<div class="collapse-btn" @click="collapseChage">
							<i v-if="!collapse" class="el-icon-s-fold"></i>
							<i v-else class="el-icon-s-unfold"></i>
						</div>
					</div>
					<el-tree
						:data="menus"
						:props="menusProps"
						accordion
						@node-click="handleNodeClick"
						node-key="code"
						:default-expanded-keys="defaultExpandedKeys"
						:style="{ overflow: 'auto', height: treeHeight }"
					/>
				</el-card>
			</el-col> -->
			<!-- 右上方的页面提示 -->
			<!-- <el-col :sm="16" :md="18" :lg="24 - lgdata" :xl="21" :style="{ height: cardHeight }"> -->
			<!-- <el-col :sm="24" :md="24" :lg="24 - lgdata" :xl="24" :style="{ height: cardHeight }"> -->
				<el-card style="height: 100%" class="card">
					<!-- <div v-if="this.selectMenu1Show.name" slot="header">
						<span>{{ this.selectMenu1Show.name }}</span>
					</div> -->
					<el-row>
						<router-view></router-view>
					</el-row>
				</el-card>
			<!-- </el-col> -->
		</el-row>
	</div>
</template>

<script>
import {
	GetDataClassificationMenus,
} from '../../api/module/dataClassification/data_classification'
export default {
	data () {
		return {
			collapse: false, //侧边栏初始折叠
			//菜单数据
			// menus: [],
            menus: [{
                children: [],
                code: "000000",
                menuName: "ConstructionQualityEvaluation",
                name: "施工质量评价",
                parentid: "0000"
            }, {
                children: [],
                code: "000001",
                menuName: "CementingQualityentry",
                name: "测井数据录入",
                parentid: "0000"
            }, {
                children: [],
                code: "000002",
                menuName: "QualityWarning",
                name: "质量预警",
                parentid: "0000"
            },
			{
                children: [],
                code: "000003",
                menuName: "CementPre",
                name: "固井预测",
                parentid: "0000"
            }
			],
			//将name（key）的值（value）变为label的值
			menusProps: {
				children: 'children',
				label: 'name'
			},
			defaultExpandedKeys: [],
			treeHeight: '',
			cardHeight: '',
			tableHeight: 0,
			rowStyle: { height: '30px' },
			//子页面的标题
			selectMenu1: {},
			selectMenu2: {
				menuName: ''
			},
			selectMenu1Show: {},
			selectMenu2Show: {
				menuName: ''
			},
			browser: '', //数据浏览页面
			management: '', //数据管理页面
			lgdata: 0,// 5, //页面栅栏大小
		}
	},
	created () {
		this.getWidth()
		window.onresize = () => {
			this.getWidth()
		}
		//获取页面类型
		if (this.$route.query.pageType == 'browser') {
			this.browser = this.$route.query.pageType
			this.lgdata = 0
		} else if (this.$route.query.pageType == 'management') {
			this.management = this.$route.query.pageType
		}
	},
	mounted () {
		this.getDataClassificationMenus()
	},
	methods: {
		// 获取宽度
		getWidth () {
			let height = window.innerHeight
			let width = window.innerWidth
			this.cardHeight = height + 'px'
			this.treeHeight = height + 'px'
			if (width >= 1200) {
				this.tableHeight = height - 130
			} else {
				this.tableHeight = height - 290
			}
			this.rowStyle.height = this.tableHeight / 12 + 'px'
		},
		// 侧边栏折叠
		collapseChage () {
			if (this.collapse == false) {
				this.lgdata = 1;
			} else {
				this.lgdata = 5;
			}
			this.collapse = !this.collapse;
		},
		// 获取菜单
		getDataClassificationMenus () {
			this.selectMenu1 = { ...this.menus[0] }  //菜单根
			this.defaultExpandedKeys.push(this.selectMenu1.code) 
			this.selectMenu2 = { ...this.menus[0].children[0] } //根菜单子菜单
			this.selectMenu1Show = this.selectMenu1
			this.selectMenu2Show = this.selectMenu2
			console.log("点击2")
			console.log(this.selectMenu1)
		},
		// 点击菜单节点
		handleNodeClick (data) {
			if (data.children.length == 0) {
				this.selectMenu2 = { ...data }
			} else {
				this.selectMenu1 = { ...data }
				console.log("点击")
				console.log(data)
				 console.log(this.selectMenu1);
				this.defaultExpandedKeys[0] = this.selectMenu1.code
				this.selectMenu2 = {}
			}
			//进行路径的跳转
			let path = '/' + data.menuName
			// console.log(path)
			console.log("点击3")
             console.log(data)
			//如果为空就不显示
			if(data.menuName == null || data.menuName == "") {
				//渲染一个空页面
			} else {
				this.selectMenu1Show = data
				this.selectMenu2Show = this.selectMenu2
				this.$router.push({
					path: path,
					query: {
						menuName: this.selectMenu2.menuName,
						tableHeight: this.tableHeight
					}
				})
			}
		}
	}
}
</script>

<style scoped>
.card >>> .el-card__body {
	padding: 10px;
}
.card >>> .el-card__header {
	font-size: 17px;
	padding: 5px 10px;
	/* padding: 5px 10px !important; */
	height: 40px;
	line-height: 30px;
	background-color: #eef0f6;
}

.collapse-btn {
	float: right;
	cursor: pointer;
	line-height: 30px;
}
.collapse-btn:hover {
	background: rgb(218, 221, 226);
}

</style>
